<template>
  <div id="login"
       :class="bg">
    <!-- <backgroud :url="bg" /> -->
    <el-form ref="loginForm"
             :model="form"
             :rules="rules"
             label-width="80px"
             class="login-box"
             v-loading="loading"
             element-loading-text="onloading"
             @keyup.enter.native="onSubmit('loginForm')">
      <img id="logo"
           src="../assets/logo.png">
      <el-form-item label="账号"
                    prop="username">
        <el-input class="input"
                  type="text"
                  placeholder="请输入账号"
                  v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码"
                    prop="password">
        <el-input class="input"
                  type="password"
                  placeholder="请输入密码"
                  v-model="form.password"
                  show-password />
      </el-form-item>
      <el-button type="primary"
                 v-on:click="onSubmit('loginForm')">登录</el-button>
      <div id="forget">
        <!-- <el-button type="text"
                   size="mini"
                   v-on:click="forget">忘记密码?</el-button> -->
      </div>
    </el-form>
  </div>
</template>

<script>
var interval = null; //计时器
import backgroud from "@/components/Backgroud";
export default {
  name: "Login",
  components: {
    backgroud
  },
  data() {
    return {
      bgList: [
        "bg-sunday",
        "bg-monday",
        "bg-tuesday",
        "bg-wednesday",
        "bg-thursday",
        "bg-friday",
        "bg-saturday"
      ],
      bg: "bg-monday",
      // bg: "bg.jpg",
      form: {
        username: "",
        password: ""
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不可为空", trigger: "blur" }]
      },
      // 对话框显示和隐藏
      dialogVisible: false,
      //
      loading: false
    };
  },
  methods: {
    updataItem() {
      var week = new Date().getDay();
      this.bg = this.bgList[week];
    },
    onSubmit(formName) {
      this.loading = true;
      // 为表单绑定验证功能
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.userInfo
            .login({
              username: this.form.username,
              password: this.form.password
            })
            .then(response => {
              if (response.data.status === 1) {
                // console.log("login successfully", response.data);
                this.$store.dispatch("setToken", response.data.Token);
                this.$store.dispatch("setID", response.data.id);
                this.$store.dispatch("setUser", response.data.name);
                this.$store.dispatch("setRights", response.data.rights);
                this.$store.dispatch("setArea", response.data.area);
                this.$router.replace("/home");
              } else {
                this.$message.error(response.data.message);
              }
              this.loading = false;
            })
            .catch(error => {
              console.log("login error");
              this.$message.error("登陆超时，请重试");
              this.loading = false;
            });
        } else {
          this.dialogVisible = true;
          this.loading = false;
          return false;
        }
      });
    },
    forget() {
      this.$alert(
        "请联系管理员何张(zhang.he@yanfeng.com)修改密码",
        "hello!!",
        {}
      );
    }
  },
  mounted() {
    this.updataItem();
    if (interval != null) {
      //判断计时器是否为空
      clearInterval(interval);
      interval = null;
    }
    interval = setInterval(this.updataItem, 60 * 1000);
  },
  destroyed() {
    if (interval != null) {
      //判断计时器是否为空
      clearInterval(interval);
      interval = null;
    }
  }
};
</script>

<style lang="less" scoped>
#login {
  height: 100vh;
  padding-top: 10%;
}
#logo {
  width: 60%;
}
/*#input {*/
/*  width: 200px;*/
/*  margin-right: 50px;*/
/*}*/
.login-box {
  border: 1px solid #dcdfe6;
  width: 30%;
  // height: 40%;
  margin-left: 35%;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: #ffffffab;
}
/deep/.el-form-item__label {
  text-align: right;
  float: left;
  font-size: 16px;
}
.el-form-item {
  width: 70%;
  margin: 22px auto;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
}
.el-button {
  background-color: #ffffff00;
  color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#forget {
  margin-top: 10px;
}
// 背景
.bg-monday {
  background-image: linear-gradient(
    -225deg,
    #5d9fff 0%,
    #b8dcff 48%,
    #6bbbff 100%
  );
}
.bg-tuesday {
  background-image: linear-gradient(
    to right,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
}
.bg-wednesday {
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.bg-thursday {
  background-image: linear-gradient(-45deg, #ffc796 0%, #ff6b95 100%);
}
.bg-friday {
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
}
.bg-saturday {
  background-image: linear-gradient(-225deg, #b6cee8 0%, #f578dc 100%);
}
.bg-sunday {
  background-image: linear-gradient(
    to right bottom,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
}
</style>
